<template>
  <div class="ps_w_h_100 chart-grid">
    <ps-borderbox3
      v-for="(item, index) in list"
      :key="index"
      :show-shadow="false"
      :background-color="item.bgc"
      class="ps_w_h_100 chart-grid-item"
      hideAngle
    >
      <div class="icon">
        <el-icon size="30" :color="item.iconColor">
          <component :is="item.icon" />
        </el-icon>
      </div>

      <div class="text">
        <div class="title">
          {{ props.mode === 0 ? item.OrderName : item.Udef1 }}
        </div>

        <div class="cts">
          <span class="ctl">本月</span>
          <span class="ctl">今日</span>
          <span class="ct">{{ item.M ? item.M : '' }}</span>
          <span class="ct">{{ item.D ? item.D : '' }}</span>
        </div>
      </div>
    </ps-borderbox3>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {
  getTodayProcessBaogong,
  getTodayProcessBaogong1
} from '@/api/visual/index.js'

const data = ref([])

const props = defineProps({
  mode: {
    // 0 为测试 1为正式
    type: Number,
    default: 1
  }
})

const bgc = ref([
  '#002840',
  '#3a1443',
  '#0d2263',
  '#2e4e7e',
  '#5d513c',
  '#574266'
])
const icon = ref([
  'Discount',
  'UploadFilled',
  'Promotion',
  'Connection',
  'Position',
  'Flag'
])

const iconColor = ref([
  '#1fb673',
  '#f24f7d',
  '#4f8af7',
  '#1d69db',
  '#c59138',
  '#972de2'
])

const list = computed(() => {
  const newData = data.value.map((item, index) => {
    item.bgc = bgc.value[index]
    item.icon = icon.value[index]
    item.iconColor = iconColor.value[index]
    return item
  })

  return newData
})

onMounted(() => {
  if (props.mode === 0) {
    getTodayProcessBaogong1().then(response => {
      data.value = response.data
    })
  } else {
    getTodayProcessBaogong().then(response => {
      data.value = response.data
    })
  }
})
</script>

<style scoped lang="scss">
$gap: 5px;

.chart-grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);

  grid-column-gap: $gap;
  grid-row-gap: $gap;

  .chart-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-evenly;

    .text {
      .cts {
        width: 160px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 18%;
      }
      .ct {
        // color: #06fd9a;
        color: #33cc66;
        font-size: 26px;
        font-weight: bold;
      }

      .ctl {
        // color: rgba(255, 255, 255, 0.6);
        color: #99cc99;
        margin-bottom: 4px;
        font-size: 18px;
      }

      .title {
        font-size: 22px;
        // font-weight: bold;

        color: #f9fac8;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
